<template>
  <div>
    <el-form inline>
      <el-form-item label="关键字">
        <el-input placeholder="请输入角色名称" v-model="roleSearchDTO.searchValue"/>
      </el-form-item>
      <el-form-item>
        <el-button color="#288FC7" :icon="Search" @click="getRoles">搜索</el-button>
      </el-form-item>
      <el-form-item>
        <el-button color="#288FC7" @click="addDialogVisible=true">新增</el-button>
      </el-form-item>
    </el-form>
  </div>
  <div>
    <el-table :data="allRoles" v-loading="loading" >
      <el-table-column prop="id" label="编号" width="180"/>
      <el-table-column prop="roleKey" label="角色key"/>
      <el-table-column prop="roleName" label="角色名" width="180"/>
      <el-table-column prop="createTime" label="创建时间"/>
      <el-table-column prop="description" label="描述"/>
      <el-table-column prop="createBy" label="创建人"/>
      <el-table-column label="状态">
        <template #default="item">
          <el-switch v-model="item.row.state" :active-value="0" :inactive-value="1" @change="updateState(item.row)"
                     style="--el-switch-on-color: #288FC7; --el-switch-off-color: #021F283C"/>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template #default="item">
          <el-text class="mx-1" type="danger" @click="openDeletePopUps(item.row.id) ">删除</el-text>
          <el-divider direction="vertical"/>
          <el-text class="mx-1" type="danger" @click="openUpdatePopUps(item.row.id)">修改</el-text>
        </template>
      </el-table-column>
    </el-table>
  </div>
  <div class="pagination">
    <el-pagination background layout="prev, pager, next" v-model:current-page="roleSearchDTO.pageNum" v-model:page-size="roleSearchDTO.pageSize"  :total="roleSearchDTO.totals"/>
  </div>
  <!--  弹窗                          -->
  <div>
    <el-dialog
        v-model="updateDialogVisible"
        title="修改"
        width="40%"
        @close="addRef.resetFields()"
    >
      <div>
        <el-form :model="ModifyRoleVO" ref="addRef" label-width="80">
          <el-form-item label="角色名称" prop="roleName">
            <el-input v-model="ModifyRoleVO.role.roleName" placeholder="请输入角色名称" clearable/>
          </el-form-item>
          <el-form-item label="角色标识" prop="roleKey">
            <el-input v-model="ModifyRoleVO.role.roleKey" placeholder="请输入角色标识" clearable/>
          </el-form-item>
          <el-form-item label="描述" prop="description">
            <el-input
                v-model="ModifyRoleVO.role.description"
                :rows="2"
                type="textarea"
                placeholder="请输入该角色描述"
            />
          </el-form-item>
          <el-form-item label="状态" prop="state">
            <el-switch
                v-model="ModifyRoleVO.role.state"
                size="large"
                active-text="启用"
                inactive-text="禁用"
                :active-value="0"
                :inactive-value="1"
            />
          </el-form-item>
          <el-form-item label="权限">
            <el-card style="width: 100%">
              <el-tree
                  ref="treeRef"
                  style="max-width: 600px"
                  :data="ModifyRoleVO.allPermission"
                  show-checkbox
                  default-expand-all
                  node-key="id"
                  highlight-current
                  :props="defaultProps"
                  :default-checked-keys="ModifyRoleVO.havePermissionIds"
              />
            </el-card>
          </el-form-item>
        </el-form>
      </div>
      <template #footer>
      <span class="dialog-footer">
        <el-button @click="updateDialogVisible = false">取消</el-button>
        <el-button color="#811ADC" @click="saveUpdate">
          保存
        </el-button>
      </span>
      </template>
    </el-dialog>
  </div>
  <div>
    <el-dialog
        v-model="addDialogVisible"
        title="新增"
        width="30%"
        @close="addRef.resetFields()"
    >
      <div>
        <el-form :model="roleInfo" ref="addRef" :rules="rules" label-width="80">
          <el-form-item label="角色名称" prop="roleName">
            <el-input v-model="roleInfo.roleName" placeholder="请输入角色名称" clearable/>
          </el-form-item>
          <el-form-item label="角色标识" prop="roleKey">
            <el-input v-model="roleInfo.roleKey" placeholder="请输入角色标识" clearable/>
          </el-form-item>
          <el-form-item label="描述" prop="description">
            <el-input
                v-model="roleInfo.description"
                :rows="2"
                type="textarea"
                placeholder="请输入该角色描述"
            />
          </el-form-item>
          <el-form-item label="状态" prop="state">
            <el-switch
                v-model="roleInfo.state"
                size="large"
                active-text="启用"
                inactive-text="禁用"
                :active-value="0"
                :inactive-value="1"
            />
          </el-form-item>
        </el-form>
      </div>
      <template #footer>
      <span class="dialog-footer">
        <el-button @click="addDialogVisible = false">取消</el-button>
        <el-button color="#288FC7" @click="sendAddRole(addRef)">
          提交
        </el-button>
      </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import {ref, onMounted, reactive, watch} from "vue";
import {
  getAllRoles,
  updateRole,
  addRole,
  deleteRole, getModifyRoleVO, ModifyRole, searchRole
} from '@/api/home/permission/role'
import {ElMessage, ElMessageBox} from 'element-plus'

const updateDialogVisible = ref(false)
const addDialogVisible = ref(false)
const loading = ref(true)
let addRef = ref()
let allRoles = ref()
let treeRef = ref()
let roleInfo = ref({
  id: '',
  roleName: '',
  roleKey: '',
  description: '',
  state: '0',
  menus: []
})
let ModifyRoleVO = ref({})

let roleSearchDTO=reactive({
  searchValue:'',
  state:-1,
  pageNum:1,
  pageSize:7,
  totals:0
})

const defaultProps = {
  label: 'name',
  value: 'id',
  children: 'children'
}

onMounted(() => {
  /*初始化*/
  getRoles()
})

/*获取所有角色*/
async function getRoles() {
  let res = await searchRole(roleSearchDTO)
  allRoles.value = res.data.records
  roleSearchDTO.totals=res.data.total-0
  loading.value=false
}

function updateState(role) {
  updateRole(role)
}

/*弹出提示*/
function openDeletePopUps(roleId) {
  ElMessageBox.confirm(
      '该操作无法撤销，确认删除该角色？',
      '警告',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }
  ).then(() => {
    deleteRole(roleId)
  })
}

/*打开修改弹窗，初始化数据*/
function openUpdatePopUps(id) {
  //获取角色信息
  getModifyRoleVO(id).then(res => {
    ModifyRoleVO.value = res.data
  }).finally(() => {
    updateDialogVisible.value = true
  })
}
function saveUpdate() {
  //获取选中的权限id：treeRef.value?.getCheckedKeys(false)
  ModifyRoleVO.value.havePermissionIds = treeRef.value?.getCheckedKeys(false)
  ModifyRole(roleInfo.value)
  updateDialogVisible.value = false
}

function sendAddRole(r) {
  r.validate((v) => {
    if (v) {
      addRole(roleInfo.value)
      addDialogVisible.value = false
    } else return false
  })
}

/*校验规则*/
//新增
let rules = reactive({
  roleName: [
    {required: true, message: '请输入角色名称', trigger: 'blur'},
  ],
  roleKey: [
    {required: true, message: '请输入角色标识', trigger: 'blur'},
  ],
  description: [
    {required: true, message: '请输入角色描述', trigger: 'blur'},
  ],

})
watch(()=>roleSearchDTO.pageNum,()=>{
  getRoles()
})
</script>
<style scoped>
</style>
